<template>
	<view class="order-item" :class="mode?'show':''"
		@click="orderChang(item)">
		<view class="order-up" v-if="!mode">
			<view class="order-no">订单编号：{{item.no}}</view>
			<view class="order-state">{{item.status_name}}</view>
			<!-- <view class="order-state">已完成</view> -->
			<!-- 			<view class="order-state">已取消</view>
			<view class="order-state">待评价</view>
			<view class="order-state">已发货</view>
			<view class="order-state">已收货</view> -->
		</view>
		<view class="order-conter" v-for="items in goods_data" :key="items.id">
			<view class="order-left" :class="mode?'show':''">
				<u-image :src="items.img" radius="5" width="100%" :height="mode?'180rpx':'220rpx'"></u-image>
			</view>
			<view class="order-right" :class="mode?'show':''">
				<view class="order-info-up">
					<view class="order-name u-line-1" :class="mode?'show':''">{{items.name}}</view>
					<view class="order-sku u-line-1">规格：{{items.sku_name}}</view>
				</view>
				<view class="order-dliter">
					<view class="order-num" :class="mode?'show':''">X{{items.num}}</view>
					<view class="order-pacie" :class="mode?'show':''">￥{{items.price}}</view>
				</view>
				<view class="order-info-botem"
					v-if="(!mode&&item.status==3&&items.is_back_status) ||(!mode&&item.status==3&&!items.is_back_status)">
					<button class="order-info-button cu-btn" v-if="item.status==3&&!items.is_back_status"
						@click.stop="applyAfterChang(items,index)">申请售后</button>
					<button class="order-info-button cu-btn" v-if="item.status==3&&items.is_back_status"
						@click.stop="applyAfterChang(items,index)">售后详情</button>
					<button class="order-info-button cu-btn" @click.stop="evaluateChang(items,index)"
						v-if="item.status==3&&items.comment_state!=2">评价</button>
				</view>
			</view>
		</view>
		<view class="order-amount" v-if="!mode&&item.status!=2&&!item.is_pay">
			<!-- <view class="amount-coupon">优惠券：-￥520.00</view> -->
			<view class="amount-pacie">待支付：￥{{item.pay_money}}</view>
		</view>
		<view class="order-botem" v-if="!mode">
			<!-- <button class="order-button cu-btn show">联系客服</button> -->
			<button class="order-button cu-btn show" @click.stop="cancelLation(item)"
				v-if="item.status!=2&&item.is_pay&&!item.is_send">取消订单</button>
			<button class="order-button cu-btn"
				@click.stop="multiRedirect('/subpkg/orderdetails/orderdetails?id=' + item.id)">订单详情</button>
			<button class="order-button cu-btn" @click.stop="logisticsChang(item)"
				v-if="$u.test.object(item.logistics)">查看物流</button>
			<!-- <button class="order-button cu-btn" v-if="item.is_back">售后详情</button> -->
			<button class="order-button cu-btn" v-if="item.status==1&&item.is_send==1"
				@click.stop="confirmEvet(item)">确认收货</button>
			<!-- 			<button class="order-button cu-btn" v-if="item.status==3&&!item.is_comment" @click.stop="multiRedirect('/subpkg/evaluate/evaluate')">评价</button> -->
			<!-- 			<button class="order-button cu-btn show" v-if="item.status==3" @click.stop="multiRedirect('/subpkg/orderrefund/orderrefund?id=' + item.id)">申请售后</button> -->
			<button class="order-button cu-btn" v-if="item.status!=2&&!item.is_pay"
				@click.stop="OrderPay(item)">立即支付</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "order-item",
		props: {
			route:{
				type:Boolean,
				default:true
			},
			mode: {
				type: String,
				default: ''
			},
			item: {
				type: Object,
				default: (() => {
					return {}
				})
			},
			index: {
				type: [Number, String],
				default: ''
			}
		},
		computed: {
			goods_data() {
				return this.item.goods_list || []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			orderChang(item){
				if(this.route){
					this.multiRedirect('/subpkg/orderdetails/orderdetails?id=' + item.id)
				}
			},
			applyAfterChang(e, i) {
				let obj = {
					index: i,
					id: e.id
				}
				this.$u.vuex('after_data', obj)
				this.multiRedirect('/subpkg/orderrefund/orderrefund?id=' + e.id)
			},
			evaluateChang(e, i) {
				let obj = {
					index: i,
					id: e.id
				}
				this.$u.vuex('evalua_data', obj)
				this.multiRedirect('/subpkg/evaluate/evaluate?data=' + JSON.stringify(e))
			},
			logisticsChang(e) {
				this.showLoding()
				const {
					logistics_no,
					no
				} = e.logistics
				this.$network('/api/index/logistics', {
					com: logistics_no,
					num: no
				}).then(res => {
					if (res.code == 1) {
						this.$u.vuex('logistics_list', res.data)
						this.multiRedirect('/subpkg/schedule/schedule')
					}
				}).finally((e) => {
					this.showhideloding()
				})
			},
			confirmEvet(e) {
				uni.showModal({
					title: '提示',
					content: '确认收货?',
					success: (res) => {
						if (res.confirm) {
							this.$network('/api/order/receive', {
								id: e.id
							}).then(res => {
								this.$u.toast('商品收货成功')
								this.$emit('confirmChang', e)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			cancelLation(e) {
				uni.showModal({
					title: '提示',
					content: '确认取消该笔订单?',
					success: (res) => {
						if (res.confirm) {
							this.$network('/api/order/cancel', {
								id: e.id
							}).then(res => {
								this.$u.toast('订单取消成功')
								this.$emit('cancelChang', e)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			OrderPay(e) {
				uni.showModal({
					title: '提示',
					content: '确认支付该笔订单?',
					success: (res) => {
						if (res.confirm) {
							this.$network('/api/pay/info', {
								pay_way: 'wechat_mini',
								order_no: e.no
							}).then(res => {
								const {
									info
								} = res.data
								let obj = {
									item: e,
									info
								}
								this.$emit('payChang', obj)
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.order-amount {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 28rpx;
		padding-bottom: 25rpx;

		.amount-pacie {
			color: red;
			font-weight: bold;
			margin-left: 15rpx;
		}

		.amount-coupon {
			color: #FFCF4F;
		}
	}

	.order-item {
		width: 100%;
		background: #FFF;
		padding: 15px;
		margin-top: 20rpx;
		border-radius: 8px;

		&.show {
			padding: 0 0 5rpx 0;
			margin-top: 0;
			border-radius: 0;
			border-bottom: 1px solid #ECECEC;
		}

		.order-botem {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.order-button {
				min-width: 180rpx;
				height: 65rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #FFCF4F;
				color: #333;
				font-size: 28rpx;
				font-weight: bold;
				margin: 0 0 0 15rpx;
				padding: 0;

				&.show {
					background-color: #e4e4e4;
					color: #999;
				}
			}
		}

		.order-conter {
			margin: 30rpx 0;
			display: flex;
			align-items: initial;
			justify-content: space-between;

			.order-left {
				width: 35%;

				&.show {
					width: 28%;
				}
			}

			.order-right {
				width: 62%;

				&.show {
					width: 68%;
				}

				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.order-info-up {
					.order-name {
						font-size: 30rpx;
						font-weight: bold;
						color: #000;

						&.show {
							font-size: 28rpx;
							font-weight: 400;
						}
					}

					.order-sku {
						// background: #f9f9f9;
						// border-radius: 5px;
						// padding: 3px 8px;
						font-size: 25rpx;
						color: #999;
						margin-top: 8rpx;

						&.show {
							font-size: 25rpx;
						}
					}
				}

				.order-info-botem {
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.order-info-button {
						width: 120rpx;
						height: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						background-color: #FFCF4F;
						color: #333;
						font-size: 25rpx;
						font-weight: bold;
						padding: 0;
						margin: 0 0 0 15rpx;
						border-radius: 5px;
					}
				}

				.order-dliter {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.order-pacie {
						font-size: 30rpx;
						color: red;
						font-weight: bold;

						&.show {
							font-size: 28rpx;
						}
					}

					.order-num {
						font-size: 28rpx;
						color: #999;

						&.show {
							font-size: 25rpx;
						}
					}
				}

				.order-sku {
					// background: #f9f9f9;
					// border-radius: 5px;
					// padding: 3px 8px;
					font-size: 28rpx;
					color: #999;

					&.show {
						font-size: 25rpx;
					}
				}
			}
		}

		.order-up {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.order-no {
				font-size: 30rpx;
				color: #333333;
				letter-spacing: 1px;
			}

			.order-state {
				font-size: 28rpx;
				color: #FFCF4F;
				font-weight: 550;
			}
		}
	}
</style>
